import {Radio} from "antd";
import React, {FC, useCallback, useEffect, useMemo, useRef, useState} from "react";
import videojs from "video.js";
import "video.js/dist/video-js.min.css";
import "./css/VideoPreview.less";
import useStateRef from "../../customUse/useStateRef.tsx";

const videoType: any = {
    'flv': 'video/x-flv',
    'mp4': 'video/mp4'
}

interface VideoPreviewProps {
    defaultKey?: string,
    suffix: string,
    file: any,
    fileList: any[]
}

const VideoPreview: FC<VideoPreviewProps> = (props) => {

    const videoBoxRef = useRef();
    const videoRef = useRef();
    const listRef = useRef([]);

    const [list, setList] = useStateRef([], listRef);

    const getVideoType: Function = useCallback((type: string) => {
        return videoType[type];
    }, []);

    const loadVideo: Function = useCallback(() => {
        const {file, suffix, fileList, defaultKey}: { file: any, suffix: string, fileList: any[], defaultKey?: string } = props;
        if (file) {
            videoRef.current.src({
                src: file,
                type: getVideoType(suffix)
            });
            setList([props]);
        } else if (fileList && fileList.length) {
            let index: number = fileList.findIndex((i: any) => (i.id === defaultKey));
            index = index === -1 ? 0 : index;
            videoRef.current.src({
                src: fileList[index].file,
                type: getVideoType(fileList[index].suffix) || 'video/mp4'
            });
            setList(fileList);
        }
    }, [props.file, props.fileList, props.defaultKey]);

    const initVideo: Function = useCallback(() => {
        videoRef.current = videojs(videoBoxRef.current, {
            controls: true,
            preload: 'auto',
            language: 'zh-CN',
            playbackRates: [0.5, 0.75, 1, 1.5, 2], // 倍速数组
            controlBar: {
                children: {
                    PlayToggle: true,
                    CurrentTimeDisplay: true,
                    DurationDisplay: true,
                    ProgressControl: true,
                    Quality: true,
                    PlaybackRateMenuButton: true,
                    volumePanel: {
                        inline: false,
                    },
                    PictureInPictureToggle: true,
                    FullscreenToggle: true,
                }
            }
        });
    }, []);

    const handleChangeVideo: Function = useCallback(({target}: { target: any }) => {
        let node: any = listRef.current.find((i: any) => (i.id === target.value));
        videoRef.current.src({
            src: node.file,
            type: "video/mp4"
        });
    }, []);

    useEffect(() => {
        initVideo()
    }, [props.fileList, props.file, props.defaultKey]);

    useEffect(() => {
        loadVideo();
    }, [props]);

    const renderVideoPreview = useMemo(() => {
        return (
            <div className={"sf_core_video_preview"}>
                <video
                    ref={videoBoxRef}
                    className={"video-js sf_core_video_preview_video"}
                    style={{width: list.length > 1 ? "calc(100% - 100px)" : "100%"}}
                >
                </video>
                {list.length > 1 ? <div className="sf_core_video_preview_list">
                    <Radio.Group onChange={handleChangeVideo} options={list.map((item: any) => {
                        return {
                            value: item.id,
                            label:
                                <video>
                                    <source src={item.file}/>
                                </video>
                        }
                    })}/>
                </div> : null}
            </div>
        )
    }, [list]);

    return (renderVideoPreview);
};

export default React.memo(VideoPreview);